<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>
    <h1>真划算</h1>
    <table>
        <tr>
            <th>商品</th>
            <th>单价</th>
            <th>颜色</th>
            <th>库存</th>
            <th>好评率</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>罗技鼠标</td>
            <td>80</td>
            <td>黑色</td>
            <td>893</td>
            <td>98%</td>
            <td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)" /></td>
        </tr>
        <tr>
            <td>微软键盘</td>
            <td>150</td>
            <td>黑色</td>
            <td>100</td>
            <td>98%</td>
            <td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)" /></td>
        </tr>
        <tr>
            <td>手机壳</td>
            <td>60</td>
            <td>透明</td>
            <td>200</td>
            <td>98%</td>
            <td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)" /></td>
        </tr>
        <tr>
            <td>耳机</td>
            <td>100</td>
            <td>蓝色</td>
            <td>302</td>
            <td>98%</td>
            <td align="center"><input type="button" value="加入购物车" onclick="addShopping(this)" /></td>
        </tr>

    </table>

    <h1>购物车</h1>
    <table>
        <thead>
            <tr>
                <td>商品</td>
                <td>单价</td>
                <td>数量</td>
                <td>金额</td>
                <td>删除</td>
            </tr>
        </thead>
        <tbody id="goods">
            <!--
    <tr>
    
        <td>罗技鼠标</td>
        <td>80</td>
        <td>
        <input type="button" value="-"/>
        <input type="text" size="3" readonly="readonly"/>
        <input type="button" value="+"/>
        </td>
        <td>80</td>
        <td align="center">
        <input type="button" value="*"/>
        </td>
    </tr>-->
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" align="right">总计</td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
</body>
<script>
    function addShopping(btn) {
        var tds = $(btn).parent().siblings();//获取当前元素的父节点的全部兄弟节点，就是当前这行的所有td
        var name = $(tds).eq(0).text();//获取商品名称的td的文本值
        var price = $(tds).eq(1).text();//获取商品价格的td的文本值
        var html = $("<tr>"    //开始拼接HTML元素，将取到的东西展示到对用的input中
            + "<td>" + name + "</td>"
            + "<td>" + price + "</td>"
            + "<td>"
            + "<input type='button' value='-'/>"
            + "<input type='text' size='3' readonly='readonly'/>"
            + "<input type='button' value='+'/>"
            + "</td>"
            + "<td>" + price + "</td>"
            + "<td align='center'>"
            + "<input type='button' value='*'/>"
            + "</td></tr>");
        $("#goods").append(html);
    }

    function deletShopping(btn) {//给上一步你拼接的删除按钮上绑定一个这样的方法
        $(btn).parent().parent().remove();
    }

    function increas(btn) {
        var text = $(btn).prev();
        var acount = parseInt($(text).val());
        $(text).val(++acount);
        //获取单价
        var tds = $(text).parent().siblings();
        var price = parseInt($(tds).eq(1).text());
        //获取总价
        var sum = price * acount;
        $(tds).eq(2).text(sum);
    }
    function decrease(btn) {
        var text = $(btn).next();
        var acount = parseInt($(text).val());
        $(text).val(--acount);
        if (acount < 1) {
            return;
        }
        //获取单价
        var tds = $(text).parent().siblings();
        var price = parseInt($(tds).eq(1).text());

        //获取总价
        var sum = price * acount
        $(tds).eq(2).text(sum);
    }

    function total() {
        var trs = $("#goods tr");
        var sum = 0;
        for (var i = 0; i < trs.length; i++) {
            var td = trs.eq(i).children().eq(3);
            var price = parseInt($(td).text());
            //alert(price);
            sum = sum + price;

        }
        $("#total").text(sum);
    }

</script>
<style>
    h1 {
        text-align: center
    }

    table {
        margin: 0 auto;
        width: 60%;
        border: 2px solid #09C;
        border-collapse: collapse
    }

    table th,
    table td {
        border: 2px solid #09C;
        padding: 5px;

    }

    th {
        background-color: #0CC;
    }
</style>

</html>